<template>
  <div class="pb-fix">
    <div class="container-box">
      <header class="header flex" @click="router.back()">
        <div class="icon back">
          <img src="@/assets/image/optional/back.png" alt="">
        </div>
        <p class="title">{{ t('managementPortfolio') }}</p>
      </header>
      <p class="title-box">{{ t('myPortfolio') }}</p>
      <div class="drag-container">
        <Draggable :list="list" :animation="200" item-key="id" class="drag-box" :forceFallback="true" ghost-class="ghost"
          @change="onMoveCallback" :move="getData" handle=".drag-icon">
          <template #item="{ element }">
            <div class="flex item" @click="itemClick(element.label)" v-if="element.isFixed === true">
              <div class="flex-l">
                <div class="flex-l-item">
                  <div class="minus-icon">
                  </div>
                </div>
                <div class="flex-l-item">
                  <p class="name">{{ element.label }}</p>
                </div>
              </div>
              <div class="flex-r">
                <div class="flex-r-item data-box">
                  <div class="data-item eye-open-icon">
                    <img src="@/assets/image/optional/eye-open.png" alt="">
                  </div>
                </div>
                <div class="flex-r-item data-box">
                  <div class="data-item drag-icon">
                    <img src="@/assets/image/optional/drag.png" alt="">
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <van-swipe-cell :ref="el => swipeCellRefs[element.id] = el" :name="element.id">
                <div class="flex item">
                  <div class="flex-l">
                    <div class="flex-l-item" @click.stop="handleSwipe(element.id)">
                      <div class="icon minus-icon">
                        <img src="@/assets/image/optional/minus.png" alt="">
                      </div>
                    </div>
                    <div class="flex-l-item">
                      <p class="name">{{ element.label }}</p>
                    </div>
                  </div>
                  <div class="flex-r">
                    <div class="flex-r-item data-box">
                      <div class="data-item edit-icon"
                        @click="router.push(`/optional/groupEdit?info=${JSON.stringify(element)}`)">
                        <img src="@/assets/image/optional/edit.png" alt="">
                      </div>
                    </div>
                    <div class="flex-r-item data-box">
                      <div class="data-item drag-icon">
                        <img src="@/assets/image/optional/drag.png" alt="">
                      </div>
                    </div>
                  </div>
                </div>
                <template #right>
                  <van-button square type="danger" @click="itemUserOptionalDelete(element.id)" :text="t('delete')" />
                </template>
              </van-swipe-cell>
            </div>
          </template>
        </Draggable>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { ref, onMounted, reactive } from "vue";
import { useQuotesStore } from '@/store/quotes.store'
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import Draggable from 'vuedraggable';
import { SwipeCell, showSuccessToast } from 'vant';
import { _itemUserOptionalList, _itemUserOptionalDelete } from '@/service/quotes.api'
const swipeCellRefs = ref([]);
const { t } = useI18n()
const router = useRouter()
const route = useRouter()
const checkedAll = ref(false)


let list = reactive([
  // {
  //   label: t('我的自选'),
  //   id: 0,
  //   isFixed: false,
  // },
  {
    label: t('UsStocks'),
    id: 1,
    isFixed: true,
  },
  {
    label: t('ETF'),
    id: 2,
    isFixed: true,
  },
  {
    label: t('外汇'),
    id: 3,
    isFixed: true,
  },
  {
    label: t('digitalCurrency'),
    id: 4,
    isFixed: true,
  },
]);

onMounted(() => {
  getMyCoinsList()
})

const itemClick = (item) => {
  console.log(item, 'item')
}

const onMoveCallback = (val) => {
  console.log('拖动前的索引 :' + val.moved.newIndex);
  console.log('拖动后的索引 :' + val.moved.oldIndex);
  console.log(list, 'list');
};

const getData = (val) => {
  console.log(val.draggedContext.element.id);
};

const handleSwipe = (index) => {
  // console.log(proxy.$refs, 'proxy.$refs')
  // proxy.$refs['swipeCellDom' + id].open('right')
  console.log(index, 'index')
  console.log(swipeCellRefs.value[index], 'swipeCellRefs.value')
  swipeCellRefs.value[index].open('right');
}

const onRoute = (path) => {
  router.push(path)
}
//获取我的自选列表
const getMyCoinsList = () => {
  let params = {}
  _itemUserOptionalList(params).then(data => {

    data.list.map((item) => {
      item.isFixed = false
      item.id = item.listId
      item.label = item.listName
      list.push(item)
    })
  })
}

//删除自选分组
const itemUserOptionalDelete = (id) => {
  let obj = {
    ids: id
  }
  _itemUserOptionalDelete(obj).then((res) => {
    showSuccessToast(t('successfullyDeleted'))
    for (let i = 0; i < list.length; i++) {
      if (list[i].id == id) {
        list.splice(i, 1);
      }
    }
  })
}
</script>
  
<style lang="scss" scoped>
:deep(.van-swipe-cell__wrapper .van-button--danger) {
  height: 55px;
}

.container-box {
  .header {
    padding: 0 12px;
    align-items: center;

    .title {
      font-size: 16px;
      color: $text_color;
      text-align: center;
      flex: 1;
      transform: translate(-20px, 0px);
    }

    .icon {
      display: inline-block;
      width: 20px;
      height: 20px;
    }
  }

  .title-box {
    margin-top: 10px;
    padding: 0 12px;
    height: 32px;
    background:  $selectSymbol_background;
    line-height: 32px;
    font-weight: 400;
    font-size: 12px;
    color: #747A8F;
  }

  .drag-container {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;

    .drag-box {
      line-height: 22px;

      .item {
        padding: 16px;
        border-bottom: 1px solid $border_color;
      }

      .flex-l {
        display: flex;
        flex: 1;
        align-items: center;

        .name {
          font-size: 14px;
          color: $text_color;
        }

        .minus-icon {
          height: 20px;
          width: 20px;
          margin-right: 10px;
        }
      }

      .flex-r {
        display: flex;
        align-items: center;
        font-size: 12px;
        text-align: center;

        .flex-r-item {
          flex: 1;
          align-self: center;
        }

        .data-box {
          padding: 0 6px;

          .data-item {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            text-align: right;

            img {
              margin-left: 10px;
              height: 20px;
              width: 20px;
            }
          }
        }
      }
    }
  }
}
</style>